<template>
  <div class="root">
    <category :needData="foods">
      <img src="./assets/logo.png" alt="" slot="center">
      <a href="#" slot="footer" class="food">更多美食</a>
    </category>
    <category :needData="games">
      <ul slot="center">
        <li v-for="(item,index) in foods.content" :key="index">{{item}}</li>
      </ul>
      <div class="game" slot="footer">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </category>
    <category :needData="movies">
      <ul slot="center">
        <li v-for="(item,index) in movies.content" :key="index">{{item}}</li>
      </ul>
      <!-- 这种新写法注意一下 -->
      <template v-slot:footer>
        <div class="movie">
          <a href="#">经典</a>
          <a href="#">热门</a>
          <a href="#">推荐</a>
        </div>
        <a href="#" class="demo">demo</a>
      </template>
    </category>

  </div>
</template>

<script>

import category from './components/category.vue'
export default {
  name: 'App',
  components: {
    category
  },
  data () {
    return {
      foods: {
        title: '美食',
        content: ['火锅', '烧烤', '小龙虾', '牛排']
      },
      games: {
        title: '游戏',
        content: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']
      },
      movies: {
        title: '电影',
        content: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《泰坦尼克号》']
      },
    }
  },

}
</script>

<style>
.root {
  margin: 100px auto;
  width: 800px;
  display: flex;
  justify-content: space-around;
}
.game,
.movie,
.food,
.demo {
  display: flex;
  justify-content: space-around;
}
</style>